// 函数组件
import React, { useState, useEffect, useContext } from "react";
import {
  Input,
  Select,
  DatePicker,
  Table,
  Switch,
  Modal,
  message,
  ConfigProvider,
  Card,
  List,
} from "antd";
import { getSearch } from '../../../api/userApi'
import TagDialog from "../operations/child/TagDialog";
import zh_CN from "antd/es/locale/zh_CN";
import type { TableRowSelection } from "antd/es/table/interface";

import "../../css/public.less";
import "./userCss/UserDetails.less";

import { Space, Tag } from "antd";
import type { ColumnsType } from "antd/es/table";
import img1 from "./img/1.jpg";

function UserDetails() {

  interface DataType {
    code: string,
    data: {},
    msg: string
  }
  const [UserDetails, setUserDetails] = useState<DataType[]>([]);  //装用户详情数据
  // 基本信息
  const data = [
    {
      title: "账号",
      content: "afsfascsdda@awfsd.com",
    },
    {
      title: "生日",
      content: "2012-09-12",
    },
    {
      title: "昵称",
      content: "baobao",
    },
    {
      title: "地区",
      content: "四川省成都至锦江区",
    },
    {
      title: "手机号",
      content: "1134768776541",
    },
    {
      title: "注册时间",
      content: "2022-05-18",
    },
    {
      title: "性别",
      content: "女",
    },
    {
      title: "",
      content: "",
    },
  ];

  // 收货地址
  interface ShippingAddress {
    key: string;
    name: string;
    phone: number;
    detailedAddress: string;
    postalCode: number;
    defaultAddress: string;
    // tags: string[];
  }



  const shippingAddressColumns: ColumnsType<ShippingAddress> = [
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "手机号",
      dataIndex: "phone",
      key: "phone",
    },
    {
      title: "详细地址",
      dataIndex: "detailedAddress",
      key: "detailedAddress",
    },
    {
      title: "邮政编码",
      key: "postalCode",
      dataIndex: "postalCode",
    },
    {
      title: "默认地址",
      key: "tdefaultAddressags",
      dataIndex: "defaultAddress",
    },
  ];

  const shippingAddressData: ShippingAddress[] = [
    {
      key: "1",
      name: "John Brown",
      phone: 13565478765,
      detailedAddress: "四川成都",
      postalCode: 35456777,
      defaultAddress: "四川成都",
    },

    {
      key: "2",
      name: "John Brown",
      phone: 13565478765,
      detailedAddress: "四川成都",
      postalCode: 35456777,
      defaultAddress: "四川成都",
    },
    {
      key: "3",
      name: "John Brown",
      phone: 13565478765,
      detailedAddress: "四川成都",
      postalCode: 35456777,
      defaultAddress: "四川成都",
    },
  ];

  // 订单记录
  interface Orderistory {
    key: string;
    order: number;
    orderCode: number;
    submissionTime: string;
    userAccount: number;
    orderAmount: number;
    paymentMethod: string;
    orderSource: string;
    orderStatus: number;
  }

  const orderHistoryColumns: ColumnsType<Orderistory> = [
    {
      title: "序号",
      dataIndex: "order",
      key: "order",
    },
    {
      title: "订单编号",
      dataIndex: "orderCode",
      key: "orderCode",
    },
    {
      title: "提交时间",
      dataIndex: "submissionTime",
      key: "submissionTime",
    },
    {
      title: "用户账户",
      key: "userAccount",
      dataIndex: "userAccount",
    },
    {
      title: "订单金额",
      key: "orderAmount",
      dataIndex: "orderAmount",
    },
    {
      title: "支付方式",
      key: "paymentMethod",
      dataIndex: "paymentMethod",
    },
    {
      title: "订单来源",
      key: "orderSource",
      dataIndex: "orderSource",
    },
    {
      title: "订单状态",
      key: "orderStatus",
      dataIndex: "orderStatus",
    },
    {
      title: "操作",
      dataIndex: "operation",
      align: "center",
      width: "20%",
      render: (value, record) => (
        <div>
          {/* <button className='edit' onClick={() => clickMod(record)}>查看</button> */}
          <button className="one"> 查看</button>
          <button className="edit">编辑</button>
          <button className="del">删除</button>
        </div>
      ),
    },
  ];

  //列表项
  const orderistoryData: Orderistory[] = [
    {
      key: "1",
      order: 1,
      orderCode: 201901902920,
      submissionTime: "2019-01-03 14:49:30",
      userAccount: 18028938492,
      orderAmount: 999.0,
      paymentMethod: "微信",
      orderSource: "APP订单",
      orderStatus: 1,
    },
    {
      key: "2",
      order: 1,
      orderCode: 201901902920,
      submissionTime: "2019-01-03 14:49:30",
      userAccount: 18028938492,
      orderAmount: 999.0,
      paymentMethod: "微信",
      orderSource: "APP订单",
      orderStatus: 1,
    },
    {
      key: "3",
      order: 1,
      orderCode: 201901902920,
      submissionTime: "2019-01-03 14:49:30",
      userAccount: 18028938492,
      orderAmount: 999.0,
      paymentMethod: "微信",
      orderSource: "APP订单",
      orderStatus: 1,
    },

    {
      key: "4",
      order: 1,
      orderCode: 201901902920,
      submissionTime: "2019-01-03 14:49:30",
      userAccount: 18028938492,
      orderAmount: 999.0,
      paymentMethod: "微信",
      orderSource: "APP订单",
      orderStatus: 1,
    },
  ];

  


  // html代码
  return (
    <div className="UserDetails">
      {/* 头部 */}
      <div className="page-top">
        {/* 左边标题 */}
        <div className="page-title">
          <p>用户详情</p>
        </div>
      </div>

      {/* 内容区 */}
      <div className="page-context">
        {/* 基本信息 */}
        <div className="basicInformation">
          <p className="basicInformation-title">基本信息</p>
          <div className="UserDetails" style={{ marginBottom: "20px" }}>
            <div className="basics">
              <div className="head-img">
                {/* <img src={img1} className="img" alt="" /> */}
              </div>
              <div className="info-box">
                {data.map((item, index: any) => (
                  <div key={index} className="info">
                    <div className="info-title">{item.title}</div>
                    <div className="info-content">{item.content}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* 收货地址 */}
        <div className="receiveAddress">
          <p className="receiveAddress-title">收货地址</p>
          {/* 表格部分 */}
          <ConfigProvider locale={zh_CN}>
            <Table
              columns={shippingAddressColumns}
              dataSource={shippingAddressData}
              pagination={false}
              scroll={{ y: 270 }}
            />
          </ConfigProvider>
        </div>
        {/* 订单记录 */}
        <div className="orderHistory">
          <p className="orderHistory-title">订单记录</p>
          {/* 表格部分 */}
          <ConfigProvider locale={zh_CN}>
            <Table
              columns={orderHistoryColumns}
              dataSource={orderistoryData}
              pagination={false}
              scroll={{ y: 270 }}
            />
          </ConfigProvider>
        </div>
      </div>
    </div>
  );
}

export default UserDetails;
